<template>
  <sweet-steps :active="active" finish-status="success">
    <sweet-step v-for="step in stepsList" :key="step.title" :title="step.title" :status="step.status" />
  </sweet-steps>

  <sweet-button style="margin-top: 12px" @click="next">Next step</sweet-button>
</template>

<script setup>
import {ref} from 'vue';

const active = ref(0);
const stepsList = ref([
  {title: 'Step 1', status: ''},
  {title: 'Step 2', status: ''},
  {title: 'Step 3', status: ''},
  {title: 'Step 4', status: ''}
]);

const next = () => {
  let status = 'success';
  if (active.value === 1) {
    status = 'error';
  }
  stepsList.value[active.value++].status = status;
  if (active.value > stepsList.value.length - 1) {
    active.value = 0;
    stepsList.value.flatMap(step => {
      step.status = '';
      return step;
    });
  }
};
</script>
